<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>Icon and Label Scale</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
</head>

<body>
  <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container-fluid line-numbers">
    <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
      <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      This example uses OpenLayers v<span>8.2.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a>
      is v<span id="latest-version"></span>.
    </div>


    <div class="row-fluid">
      <a href="#" id="codepen-button" class="btn btn-link float-end">
        <i class="fab fa-codepen fa-lg"></i> Edit
      </a>
      <div class="span12">
        <h4 id="title">Icon and Label Scale</h4>
        <p class="tags">
          <span class="badge-group">
            <a href="./index.html?q=vector" class="badge badge-info">vector</a><a
              class="badge badge-info tag-modal-toggle" data-bs-toggle="modal" data-bs-target="#tag-example-list"
              data-title="vector" data-content="&lt;ul class=&quot;list-group&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mapbox-vector-tiles-advanced.html&quot;&gt;Advanced Mapbox Vector Tiles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./animated-gif.html&quot;&gt;Animated GIF&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-esri.html&quot;&gt;ArcGIS REST Feature Service&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./cluster.html&quot;&gt;Clustered Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./feature-animation.html&quot;&gt;Custom Animation&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./custom-circle-render.html&quot;&gt;Custom Circle Render&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./custom-hit-detection-renderer.html&quot;&gt;Custom Hit Detection Render&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./custom-interactions.html&quot;&gt;Custom Interactions&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./polygon-styles.html&quot;&gt;Custom Polygon Styles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./declutter-group.html&quot;&gt;Declutter Group&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./drag-and-drop-image-vector.html&quot;&gt;Drag-and-Drop Image Vector&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-and-modify-features.html&quot;&gt;Draw and Modify Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-and-modify-geodesic.html&quot;&gt;Draw and Modify Geodesic Circles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-features.html&quot;&gt;Draw Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./webgl-draw-line.html&quot;&gt;Draw lines rendered with WebGL&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-shapes.html&quot;&gt;Draw Shapes&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./clusters-dynamic.html&quot;&gt;Dynamic clusters&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./earthquake-clusters.html&quot;&gt;Earthquake Clusters&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./heatmap-earthquakes.html&quot;&gt;Earthquakes Heatmap&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./kml-earthquakes.html&quot;&gt;Earthquakes in KML&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./earthquake-custom-symbol.html&quot;&gt;Earthquakes with custom symbols&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-esri-edit.html&quot;&gt;Editable ArcGIS REST Feature Service&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./flight-animation.html&quot;&gt;Flight Animation&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./fractal.html&quot;&gt;Fractal Rendering&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-freehand.html&quot;&gt;Freehand Drawing&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./geojson.html&quot;&gt;GeoJSON&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./geojson-vt.html&quot;&gt;geojson-vt integration&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./icon-scale.html&quot;&gt;Icon and Label Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-color.html&quot;&gt;Icon Colors&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-icon.html&quot;&gt;Icon modification&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-negative.html&quot;&gt;Icon Pixel Operations&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon.html&quot;&gt;Icon Symbolizer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-width.html&quot;&gt;Icon Symbolizer width and height&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./jsts.html&quot;&gt;JSTS Integration&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./line-arrows.html&quot;&gt;LineString Arrows&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mapbox-vector-layer.html&quot;&gt;Mapbox Vector Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mapbox-vector-tiles.html&quot;&gt;Mapbox Vector Tiles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mapbox-layer.html&quot;&gt;Mapbox-gl Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./measure.html&quot;&gt;Measure&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./measure-style.html&quot;&gt;Measure using vector styles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-features.html&quot;&gt;Modify Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-test.html&quot;&gt;Modify Features Test&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./ogc-vector-tiles.html&quot;&gt;OGC Vector Tiles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./osm-vector-tiles.html&quot;&gt;OSM Vector Tiles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-osm.html&quot;&gt;OSM XML&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./populated-places.html&quot;&gt;Populated Places&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./regularshape.html&quot;&gt;Regular Shapes&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./rich-text-labels.html&quot;&gt;Rich Text Labels&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-scale-and-rotate.html&quot;&gt;Scale and Rotate using Modify Interaction&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./select-features.html&quot;&gt;Select Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./select-hover-features.html&quot;&gt;Select Features by Hover&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./select-multiple-features.html&quot;&gt;Select multiple Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./snap.html&quot;&gt;Snap Interaction&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./street-labels.html&quot;&gt;Street Labels&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./style-expressions.html&quot;&gt;Style Expressions&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./style-renderer.html&quot;&gt;Style renderer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./synthetic-lines.html&quot;&gt;Synthetic Lines&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./synthetic-points.html&quot;&gt;Synthetic Points&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./kml-timezones.html&quot;&gt;Timezones in KML&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./tooltip-on-hover.html&quot;&gt;Tooltip on Hover&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./topojson.html&quot;&gt;TopoJSON&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./topolis.html&quot;&gt;topolis integration&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./tracing.html&quot;&gt;Tracing around a polygon&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./translate-features.html&quot;&gt;Translate Features&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./turf.html&quot;&gt;turf.js&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./layer-clipping-vector.html&quot;&gt;Vector Clipping Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./image-vector-layer.html&quot;&gt;Vector Image Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-label-decluttering.html&quot;&gt;Vector Label Decluttering&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-labels.html&quot;&gt;Vector Labels&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-labels-justify-text.html&quot;&gt;Vector Labels - Justify Text&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-layer.html&quot;&gt;Vector Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./hitdetect-vector.html&quot;&gt;Vector Layer Hit Detection&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./webgl-vector-layer.html&quot;&gt;WebGL Vector Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./webgl-vector-tiles.html&quot;&gt;WebGL Vector Tiles Layer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-wfs.html&quot;&gt;WFS&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-wfs-getfeature.html&quot;&gt;WFS - GetFeature&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-wfs-geographic.html&quot;&gt;WFS with geographic coordinates&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wind-arrows.html&quot;&gt;Wind Arrows&lt;/a&gt;
                  &lt;/ul&gt;" tabindex="0">78</a>
          </span>
          <span class="badge-group">
            <a href="./index.html?q=style" class="badge badge-info">style</a><a
              class="badge badge-info tag-modal-toggle" data-bs-toggle="modal" data-bs-target="#tag-example-list"
              data-title="style" data-content="&lt;ul class=&quot;list-group&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./animated-gif.html&quot;&gt;Animated GIF&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./cog-stretch.html&quot;&gt;Band Contrast Stretch&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./cog-style.html&quot;&gt;Change Tile Layer Style&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./polygon-styles.html&quot;&gt;Custom Polygon Styles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./draw-features-style.html&quot;&gt;Drawing Features Style&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./clusters-dynamic.html&quot;&gt;Dynamic clusters&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./earthquake-clusters.html&quot;&gt;Earthquake Clusters&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./heatmap-earthquakes.html&quot;&gt;Earthquakes Heatmap&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./kml-earthquakes.html&quot;&gt;Earthquakes in KML&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./earthquake-custom-symbol.html&quot;&gt;Earthquakes with custom symbols&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./geotiff-reprojection.html&quot;&gt;GeoTIFF Reprojection&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./icon-scale.html&quot;&gt;Icon and Label Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-color.html&quot;&gt;Icon Colors&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-negative.html&quot;&gt;Icon Pixel Operations&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon.html&quot;&gt;Icon Symbolizer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-width.html&quot;&gt;Icon Symbolizer width and height&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./measure-style.html&quot;&gt;Measure using vector styles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./regularshape.html&quot;&gt;Regular Shapes&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./style-expressions.html&quot;&gt;Style Expressions&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./style-renderer.html&quot;&gt;Style renderer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./canvas-gradient-pattern.html&quot;&gt;Styling feature with CanvasGradient or CanvasPattern&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./kml-timezones.html&quot;&gt;Timezones in KML&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./topojson.html&quot;&gt;TopoJSON&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./webgl-tile-style.html&quot;&gt;WebGL Tile Layer Styles&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wind-arrows.html&quot;&gt;Wind Arrows&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./zoomslider.html&quot;&gt;Zoom Sliders&lt;/a&gt;
                  &lt;/ul&gt;" tabindex="0">26</a>
          </span>
          <span class="badge-group">
            <a href="./index.html?q=icon" class="badge badge-info">icon</a><a class="badge badge-info tag-modal-toggle"
              data-bs-toggle="modal" data-bs-target="#tag-example-list" data-title="icon" data-content="&lt;ul class=&quot;list-group&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./animated-gif.html&quot;&gt;Animated GIF&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./filter-points-webgl.html&quot;&gt;Filtering features with WebGL&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./icon-scale.html&quot;&gt;Icon and Label Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-color.html&quot;&gt;Icon Colors&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-icon.html&quot;&gt;Icon modification&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-negative.html&quot;&gt;Icon Pixel Operations&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-sprite-webgl.html&quot;&gt;Icon Sprites with WebGL&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon.html&quot;&gt;Icon Symbolizer&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./icon-width.html&quot;&gt;Icon Symbolizer width and height&lt;/a&gt;
                  &lt;/ul&gt;" tabindex="0">9</a>
          </span>
          <span class="badge-group">
            <a href="./index.html?q=label" class="badge badge-info">label</a><a
              class="badge badge-info tag-modal-toggle" data-bs-toggle="modal" data-bs-target="#tag-example-list"
              data-title="label" data-content="&lt;ul class=&quot;list-group&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./icon-scale.html&quot;&gt;Icon and Label Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./street-labels.html&quot;&gt;Street Labels&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-labels.html&quot;&gt;Vector Labels&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-labels-justify-text.html&quot;&gt;Vector Labels - Justify Text&lt;/a&gt;
                  &lt;/ul&gt;" tabindex="0">4</a>
          </span>
          <span class="badge-group">
            <a href="./index.html?q=scale" class="badge badge-info">scale</a><a
              class="badge badge-info tag-modal-toggle" data-bs-toggle="modal" data-bs-target="#tag-example-list"
              data-title="scale" data-content="&lt;ul class=&quot;list-group&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./icon-scale.html&quot;&gt;Icon and Label Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./print-to-scale.html&quot;&gt;Print to scale example&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./projection-and-scale.html&quot;&gt;Projection and Scale&lt;/a&gt;
                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./modify-scale-and-rotate.html&quot;&gt;Scale and Rotate using Modify Interaction&lt;/a&gt;
                  &lt;/ul&gt;" tabindex="0">4</a>
          </span>
        </p>
        <div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog"
          aria-labelledby="tag-example-title" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="tag-example-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="list-group"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="map" class="map"></div>
        <table class="controls">
          <tr>
            <th>
              Image
            </th>
            <th></th>
            <th style="visibility: hidden;">-0.00 π</th>
            <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
            <th>
              Text
            </th>
            <th></th>
            <th></th>
          </tr>
          <tr>
            <td><label for="rotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
            <td>
              <input id="rotateWithView" type="checkbox" />
            </td>
            <td><span id="rotateWithViewOut"></span></td>
            <td></td>
            <td><label for="textRotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
            <td>
              <input id="textRotateWithView" type="checkbox" />
            </td>
            <td><span id="textRotateWithViewOut"></span></td>
          </tr>
          <tr>
            <td><label for="rotation">Rotation</label></td>
            <td>
              <input id="rotation" type="range" min="-1" max="1" step="0.05" value="0.25" />
            </td>
            <td><span id="rotationOut"></span> π</td>
            <td></td>
            <td><label for="textRotation">Rotation</label></td>
            <td>
              <input id="textRotation" type="range" min="-1" max="1" step="0.05" value="0.25" />
            </td>
            <td><span id="textRotationOut"></span> π</td>
          </tr>
          <tr>
            <td><label for="scaleX">Scale X</label></td>
            <td>
              <input id="scaleX" type="range" min="-2" max="2" step="0.1" value="1" />
            </td>
            <td><span id="scaleXOut"></span></td>
            <td></td>
            <td><label for="textScaleX">Scale X</label></td>
            <td>
              <input id="textScaleX" type="range" min="-2" max="2" step="0.1" value="1" />
            </td>
            <td><span id="textScaleXOut"></span></td>
          </tr>
          <tr>
            <td><label for="scaleY">Scale Y</label></td>
            <td>
              <input id="scaleY" type="range" min="-2" max="2" step="0.1" value="1" />
            </td>
            <td><span id="scaleYOut"></span></td>
            <td></td>
            <td><label for="textScaleY">Scale Y</label></td>
            <td>
              <input id="textScaleY" type="range" min="-2" max="2" step="0.1" value="1" />
            </td>
            <td><span id="textScaleYOut"></span></td>
          </tr>
          <tr>
            <td><label for="anchorX">Anchor X</label></td>
            <td>
              <input id="anchorX" type="range" min="0" max="1" step="0.01" value="0.5" />
            </td>
            <td><span id="anchorXOut"></span></td>
            <td></td>
            <td><label for="textAlign">Align</label></td>
            <td>
              <input id="textAlign" type="range" min="0" max="2" step="1" value="1" />
            </td>
            <td><span id="textAlignOut"></span></td>
          </tr>
          <tr>
            <td><label for="anchorY">Anchor Y</label></td>
            <td>
              <input id="anchorY" type="range" min="0" max="1" step="0.01" value="1" />
            </td>
            <td><span id="anchorYOut"></span></td>
            <td></td>
            <td><label for="textBaseline">Baseline</label></td>
            <td>
              <input id="textBaseline" type="range" min="0" max="2" step="1" value="0" />
            </td>
            <td><span id="textBaselineOut"></span></td>
          </tr>
          <tr>
            <td><label for="displacementX">Displacement X</label></td>
            <td>
              <input id="displacementX" type="range" min="-100" max="100" value="0" />
            </td>
            <td><span id="displacementXOut"></span></td>
            <td></td>
            <td><label for="textOffsetX">Offset X</label></td>
            <td>
              <input id="textOffsetX" type="range" min="-100" max="100" value="0" />
            </td>
            <td><span id="textOffsetXOut"></span></td>
          </tr>
          <tr>
            <td><label for="displacementY">Displacement Y</label></td>
            <td>
              <input id="displacementY" type="range" min="-100" max="100" value="0" />
            </td>
            <td><span id="displacementYOut"></span></td>
            <td></td>
            <td><label for="textOffsetY">Offset Y</label></td>
            <td>
              <input id="textOffsetY" type="range" min="-100" max="100" value="0" />
            </td>
            <td><span id="textOffsetYOut"></span></td>
          </tr>
        </table>

      </div>
      <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
        <input id="codesandbox-params" type="hidden" name="parameters">
      </form>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <p id="shortdesc">Example of scaling icons and labels.</p>
        <div id="docs">
          <p>Icons and labels can be scaled in both dimensions if required. A negative value will flip the image or text
            around its anchor point (reversed text is <b>not</b> suitable for line placement).</p>
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <h5 class="source-heading">main.js</h5>
      <pre><code id="example-js-source" class="language-js">import Feature from &#x27;ol/Feature.js&#x27;;
import Map from &#x27;ol/Map.js&#x27;;
import Point from &#x27;ol/geom/Point.js&#x27;;
import View from &#x27;ol/View.js&#x27;;
import {Circle, Fill, Icon, Stroke, Style, Text} from &#x27;ol/style.js&#x27;;
import {OGCMapTile, Vector as VectorSource} from &#x27;ol/source.js&#x27;;
import {Tile as TileLayer, Vector as VectorLayer} from &#x27;ol/layer.js&#x27;;

const iconFeature &#x3D; new Feature({
  geometry: new Point([0, 0]),
});

const iconStyle &#x3D; new Style({
  image: new Icon({
    anchor: [0.5, 1],
    src: &#x27;data/world.png&#x27;,
  }),
  text: new Text({
    text: &#x27;World\nText&#x27;,
    font: &#x27;bold 30px Calibri,sans-serif&#x27;,
    fill: new Fill({
      color: &#x27;black&#x27;,
    }),
    stroke: new Stroke({
      color: &#x27;white&#x27;,
      width: 2,
    }),
  }),
});

const pointStyle &#x3D; new Style({
  image: new Circle({
    radius: 7,
    fill: new Fill({
      color: &#x27;black&#x27;,
    }),
    stroke: new Stroke({
      color: &#x27;white&#x27;,
      width: 2,
    }),
  }),
});

iconFeature.setStyle([pointStyle, iconStyle]);

const vectorSource &#x3D; new VectorSource({
  features: [iconFeature],
});

const vectorLayer &#x3D; new VectorLayer({
  source: vectorSource,
});

const rasterLayer &#x3D; new TileLayer({
  source: new OGCMapTile({
    url: &#x27;https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad&#x27;,
    crossOrigin: &#x27;&#x27;,
  }),
});

const map &#x3D; new Map({
  layers: [rasterLayer, vectorLayer],
  target: &#x27;map&#x27;,
  view: new View({
    center: [0, 0],
    zoom: 3,
  }),
});

const textAlignments &#x3D; [&#x27;left&#x27;, &#x27;center&#x27;, &#x27;right&#x27;];
const textBaselines &#x3D; [&#x27;top&#x27;, &#x27;middle&#x27;, &#x27;bottom&#x27;];
const controls &#x3D; {};
const controlIds &#x3D; [
  &#x27;rotation&#x27;,
  &#x27;rotateWithView&#x27;,
  &#x27;scaleX&#x27;,
  &#x27;scaleY&#x27;,
  &#x27;anchorX&#x27;,
  &#x27;anchorY&#x27;,
  &#x27;displacementX&#x27;,
  &#x27;displacementY&#x27;,
  &#x27;textRotation&#x27;,
  &#x27;textRotateWithView&#x27;,
  &#x27;textScaleX&#x27;,
  &#x27;textScaleY&#x27;,
  &#x27;textAlign&#x27;,
  &#x27;textBaseline&#x27;,
  &#x27;textOffsetX&#x27;,
  &#x27;textOffsetY&#x27;,
];
controlIds.forEach(function (id) {
  const control &#x3D; document.getElementById(id);
  const output &#x3D; document.getElementById(id + &#x27;Out&#x27;);
  function setOutput() {
    const value &#x3D; parseFloat(control.value);
    if (control.type &#x3D;&#x3D;&#x3D; &#x27;checkbox&#x27;) {
      output.innerText &#x3D; control.checked;
    } else if (id &#x3D;&#x3D;&#x3D; &#x27;textAlign&#x27;) {
      output.innerText &#x3D; textAlignments[value];
    } else if (id &#x3D;&#x3D;&#x3D; &#x27;textBaseline&#x27;) {
      output.innerText &#x3D; textBaselines[value];
    } else {
      output.innerText &#x3D; control.step.startsWith(&#x27;0.&#x27;)
        ? value.toFixed(2)
        : value;
    }
  }
  control.addEventListener(&#x27;input&#x27;, function () {
    setOutput();
    updateStyle();
  });
  setOutput();
  controls[id] &#x3D; control;
});

function updateStyle() {
  iconStyle
    .getImage()
    .setRotation(parseFloat(controls[&#x27;rotation&#x27;].value) * Math.PI);

  iconStyle.getImage().setRotateWithView(controls[&#x27;rotateWithView&#x27;].checked);

  iconStyle
    .getImage()
    .setScale([
      parseFloat(controls[&#x27;scaleX&#x27;].value),
      parseFloat(controls[&#x27;scaleY&#x27;].value),
    ]);

  iconStyle
    .getImage()
    .setAnchor([
      parseFloat(controls[&#x27;anchorX&#x27;].value),
      parseFloat(controls[&#x27;anchorY&#x27;].value),
    ]);

  iconStyle
    .getImage()
    .setDisplacement([
      parseFloat(controls[&#x27;displacementX&#x27;].value),
      parseFloat(controls[&#x27;displacementY&#x27;].value),
    ]);

  iconStyle
    .getText()
    .setRotation(parseFloat(controls[&#x27;textRotation&#x27;].value) * Math.PI);

  iconStyle.getText().setRotateWithView(controls[&#x27;textRotateWithView&#x27;].checked);

  iconStyle
    .getText()
    .setScale([
      parseFloat(controls[&#x27;textScaleX&#x27;].value),
      parseFloat(controls[&#x27;textScaleY&#x27;].value),
    ]);

  iconStyle
    .getText()
    .setTextAlign(textAlignments[parseFloat(controls[&#x27;textAlign&#x27;].value)]);

  iconStyle
    .getText()
    .setTextBaseline(textBaselines[parseFloat(controls[&#x27;textBaseline&#x27;].value)]);

  iconStyle.getText().setOffsetX(parseFloat(controls[&#x27;textOffsetX&#x27;].value));
  iconStyle.getText().setOffsetY(parseFloat(controls[&#x27;textOffsetY&#x27;].value));

  iconFeature.changed();
}
updateStyle();

// change mouse cursor when over marker
map.on(&#x27;pointermove&#x27;, function (e) {
  const hit &#x3D; map.hasFeatureAtPixel(e.pixel);
  map.getTargetElement().style.cursor &#x3D; hit ? &#x27;pointer&#x27; : &#x27;&#x27;;
});
</code></pre>
    </div>

    <div class="row-fluid">
      <h5 class="source-heading">index.html</h5>
      <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Icon and Label Scale&lt;/title&gt;
    &lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
    &lt;style&gt;
      .map {
        width: 100%;
        height: 400px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
    &lt;table class&#x3D;&quot;controls&quot;&gt;
      &lt;tr&gt;
        &lt;th&gt;
          Image
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th style&#x3D;&quot;visibility: hidden;&quot;&gt;-0.00 π&lt;/th&gt;
        &lt;th&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
        &lt;th&gt;
          Text
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;rotateWithView&quot;&gt;Rotate with view&lt;/label&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;
          &lt;input id&#x3D;&quot;rotateWithView&quot; type&#x3D;&quot;checkbox&quot; /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;rotateWithViewOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textRotateWithView&quot;&gt;Rotate with view&lt;/label&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;
          &lt;input id&#x3D;&quot;textRotateWithView&quot; type&#x3D;&quot;checkbox&quot; /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textRotateWithViewOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;rotation&quot;&gt;Rotation&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;rotation&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-1&quot;
            max&#x3D;&quot;1&quot;
            step&#x3D;&quot;0.05&quot;
            value&#x3D;&quot;0.25&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;rotationOut&quot;&gt;&lt;/span&gt; π&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textRotation&quot;&gt;Rotation&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;textRotation&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-1&quot;
            max&#x3D;&quot;1&quot;
            step&#x3D;&quot;0.05&quot;
            value&#x3D;&quot;0.25&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textRotationOut&quot;&gt;&lt;/span&gt; π&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;scaleX&quot;&gt;Scale X&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;scaleX&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-2&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;0.1&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;scaleXOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textScaleX&quot;&gt;Scale X&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;textScaleX&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-2&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;0.1&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textScaleXOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;scaleY&quot;&gt;Scale Y&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;scaleY&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-2&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;0.1&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;scaleYOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textScaleY&quot;&gt;Scale Y&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;textScaleY&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-2&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;0.1&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textScaleYOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;anchorX&quot;&gt;Anchor X&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;anchorX&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;0&quot;
            max&#x3D;&quot;1&quot;
            step&#x3D;&quot;0.01&quot;
            value&#x3D;&quot;0.5&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;anchorXOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textAlign&quot;&gt;Align&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;textAlign&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;0&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;1&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textAlignOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;anchorY&quot;&gt;Anchor Y&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;anchorY&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;0&quot;
            max&#x3D;&quot;1&quot;
            step&#x3D;&quot;0.01&quot;
            value&#x3D;&quot;1&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;anchorYOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textBaseline&quot;&gt;Baseline&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;textBaseline&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;0&quot;
            max&#x3D;&quot;2&quot;
            step&#x3D;&quot;1&quot;
            value&#x3D;&quot;0&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textBaselineOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;displacementX&quot;&gt;Displacement X&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;displacementX&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-100&quot;
            max&#x3D;&quot;100&quot;
            value&#x3D;&quot;0&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;displacementXOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textOffsetX&quot;&gt;Offset X&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input id&#x3D;&quot;textOffsetX&quot; type&#x3D;&quot;range&quot; min&#x3D;&quot;-100&quot; max&#x3D;&quot;100&quot; value&#x3D;&quot;0&quot; /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textOffsetXOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;displacementY&quot;&gt;Displacement Y&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input
            id&#x3D;&quot;displacementY&quot;
            type&#x3D;&quot;range&quot;
            min&#x3D;&quot;-100&quot;
            max&#x3D;&quot;100&quot;
            value&#x3D;&quot;0&quot;
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;displacementYOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for&#x3D;&quot;textOffsetY&quot;&gt;Offset Y&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;input id&#x3D;&quot;textOffsetY&quot; type&#x3D;&quot;range&quot; min&#x3D;&quot;-100&quot; max&#x3D;&quot;100&quot; value&#x3D;&quot;0&quot; /&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span id&#x3D;&quot;textOffsetYOut&quot;&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

    &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
    </div>

    <div class="row-fluid">
      <h5 class="source-heading">package.json</h5>
      <pre><code id="example-pkg-source" class="language-json">{
  &quot;name&quot;: &quot;icon-scale&quot;,
  &quot;dependencies&quot;: {
    &quot;ol&quot;: &quot;8.2.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;vite&quot;: &quot;^3.2.3&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;vite&quot;,
    &quot;build&quot;: &quot;vite build&quot;
  }
}</code></pre>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="common.js"></script>
  <script src="icon-scale.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
  <script src="./resources/common.js"></script>
  <script>
    document.getElementById('tag-example-list')
      .addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget; // Button that triggered the modal
        this.querySelector('.modal-title').innerText = button.dataset.title;
        this.querySelector('.modal-body').innerHTML = button.dataset.content;
      });
  </script>
  <script>
    const releaseUrl = 'https://cdn.jsdelivr.net/npm/ol/package.json';
    fetch(releaseUrl).then(function (response) {
      return response.json();
    }).then(function (json) {
      const latestVersion = json.version;
      document.getElementById('latest-version').innerHTML = latestVersion;
      const url = window.location.href;
      const branchSearch = url.match(/\/([^\/]*)\/examples\//);
      const storageKey = 'ol-dismissed=-' + latestVersion;
      const dismissed = localStorage.getItem(storageKey) === 'true';
      if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '8.2.0' != latestVersion) {
        const link = url.replace(branchSearch[0], '/latest/examples/');
        fetch(link, { method: 'head' }).then(function (response) {
          const a = document.getElementById('latest-link');
          a.href = response.status == 200 ? link : '../../latest/examples/';
        });
        const latestCheck = document.getElementById('latest-check');
        latestCheck.style.display = '';
        document.getElementById('latest-dismiss').onclick = function () {
          latestCheck.style.display = 'none';
          localStorage.setItem(storageKey, 'true');
        }
      }
    });
  </script>
</body>

</html>